<!DOCTYPE >
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
	<title>2014 FIFA World Cup Group stage Standings Simulator</title>
	<link href="liveduel_files/styles.css" rel="stylesheet" type="text/css">
	<script src="liveduel_files/jquery-1.js"></script>
	<script src="liveduel_files/script.js"></script>
	
<style type="text/css">
.clearfix:after
{
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
html .clearfix
{
	display: block;
}
* html .clearfix
{
	height: 1%;
}
.left {
	float: left !important;
}
.right {
	float: right !important;
}
.clear {
	clear: both !important;
}

#head {
	margin: 0 auto;
	width: 960px;
}
.logo {
	width: 160px;
	padding: 10px 0;
}
.title {
	width: 400px;
	font-weight: bold;
	font-size: 1.3em;
	padding: 10px 0;
}
.timezone_selector {
	
}

body.worldcup #main {
	margin: 0 auto;
	width: 960px;
	position: relative;
	overflow: visible;
	min-height: 1080px;
}
#group {
	margin-top: 0;
	width: 160px;
	z-index: 3;
	position: absolute;
	top:0;
	left:1px;
	z-index:3;
	height: auto;
	border-bottom: 0 none;
}
#group a {
	background-color: #FFFFFF;
	border: 1px solid #999999;
	margin: 0;
	width: 90%;
	color: #FFFFFF;
	cursor: pointer;
	display: block;
	height: 90px;
	text-decoration: none;
	margin: 6px 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
	color: #000000;
	font-size: 40px;
	line-height: 90px;
	text-align: center;
}
#group a:hover, #group a.slct {
	width: 100%;
	border-right: 0 none;
	/* box-shadow: 0 0 10px 2px #CCCCCC;
	-moz-box-shadow: 0 0 10px 2px #CCCCCC;
	-webkit-box-shadow: 0 0 10px 2px #CCCCCC; */
}
#group a:first-child {
	margin-top:0;
}
.tab-body {
	background: none repeat scroll 0 0 #FFFFFF;
	padding: 8px 16px;
	width: 500px;
	position: absolute;
	top:0;
	left:160px;
	z-index:2;
	border: 1px solid #999999;
	margin: 0;
	min-height: 804px;
	padding: 0;
/* 	box-shadow: 0 0 10px 2px #CCCCCC;
	-moz-box-shadow: 0 0 10px 2px #CCCCCC;
	-webkit-box-shadow: 0 0 10px 2px #CCCCCC; */
}
#righ_panel {
	width: 300px;
	position: absolute;
	top:0;
	left:660px;
}
#righ_panel > * {
	border: 1px solid #999999;
	width: 90%;
	margin: 0 auto;
}
#t2 {
	width: auto;
	margin-left: -10px; 
}
#graph_ctn #graph {
	width: 65%;
	background:url(images/wc2010-00.png) 50% no-repeat;
	background-size: 140px 168px;
}
#Knockoutstage {
	padding: 0 1em;
}
#score_grid {
	margin-top: 20px;
}
#t1 {
	width: 480px;
	margin-top: 50px;
}
.cell {
	border: 1px solid #999999;
	margin-bottom: 10px;
}
.cell-content {
	width: 212px;
	margin: 10px 10px 5px 10px;
}
.flag-wrap {
	position: relative;
}
.input-wrap {
	height: 100%;
	position: absolute;
	width: 100%;
}
.teamname-wrap {
	
}
.time-and-place {
	border-top: 1px dashed #CCCCCC;
	margin-top: 15px;
	padding-top: 5px;
	vertical-align: middle;
	font-size: 0.8em;
}
.lagrge-flag {
	width: 96px;
	height: 60px;
	position: relative;
	border: 1px solid #999999;
}
input.goal {
	display: block;
	position: absolute;
	width: 25px;
	height: 30px;
	top: 50%;
	margin-top: -15px;
	text-align: center;
}
.goal.l {
	left: 75px;
}
.goal.r {
	right: 75px;
}
</style>
	
</head>
<body class="col2d soccer worldcup">
	<div id="container">
		<div id="head" class="clearfix">
			<div class="logo left">
				LOGO LIVEDUEL
			</div>
			<div class="title left">
				2014 Fifa World Cup
				<br>
				Group Stage Standings Simulator
			</div>
			<div class="timezone_selector left">
				<label><input class="timezone" name="timezone" value="l" type="radio">local time</label>
				<br>
				<label><input class="timezone" name="timezone" value="y" checked="checked" type="radio">your time zone</label>
			</div>
		</div>
		<div id="main">
			<div id="group" class="tab-head" style="margin-top: 0px; border-bottom-color: rgb(63, 70, 76);"><a class="tab-btn slct" id="ga" href="javascript:void(0)" onclick="loadGroup('a')" title="Group A">A</a><a class="tab-btn" id="gb" href="javascript:void(0)" onclick="loadGroup('b')" title="Group B">B</a><a class="tab-btn" id="gc" href="javascript:void(0)" onclick="loadGroup('c')" title="Group C">C</a><a class="tab-btn" id="gd" href="javascript:void(0)" onclick="loadGroup('d')" title="Group D">D</a><a class="tab-btn" id="ge" href="javascript:void(0)" onclick="loadGroup('e')" title="Group E">E</a><a class="tab-btn" id="gf" href="javascript:void(0)" onclick="loadGroup('f')" title="Group F">F</a><a class="tab-btn" id="gg" href="javascript:void(0)" onclick="loadGroup('g')" title="Group G">G</a><a class="tab-btn" id="gh" href="javascript:void(0)" onclick="loadGroup('h')" title="Group H">H</a></div>
			<div class="tab-body">
				<div id="t1">
					<div id="t1holder" class="row clearfix">
						<div class="cell left">
							<div class="cell-content">
								<div class="flag-wrap clearfix">
									<div class="lagrge-flag left">
										flag1
										<input type="text" class="goal l">
									</div>
									<div class="lagrge-flag right">
										flag2
										<input type="text" class="goal r">
									</div>
								</div>
								<div class="teamname-wrap clearfix">
									<div class="teamname left">
										team1
									</div>
									<div class="teamname right">
										team 2
									</div>
								</div>
								<div class="time-and-place">
									June 12 - 20:00 Sao Paulo
								</div>
							</div>
						</div>
						<div class="cell right">
							<div class="cell-content">
								<div class="lagrge-flag left">
									flag1
								</div>
								<div class="lagrge-flag right">
									flag2
								</div>
								
							</div>
						</div>
					</div>
				</div>
			
				<!-- <table class="tbl1" id="t1"><tbody><tr><th rowspan="2">1</th><td class="d">2013-06-13</td><td class="t">03:00</td><td class="v">Sao Paulo</td><td class="team rtxt"><div class="flag-24 flag-24-BR"></div>Brazil</td><td class="score ctxt"><input maxlength="2" data-team="A1" pattern="[0-9]*" type="text">&#65293;<input maxlength="2" data-team="A2" pattern="[0-9]*" type="text"></td><td class="team ltxt"><div class="flag-24 flag-24-HR"></div>Croatia</td></tr><tr><td class="d">2013-06-13</td><td class="t">23:00</td><td class="v">Natal</td><td class="team rtxt"><div class="flag-24 flag-24-MX"></div>Mexico</td><td class="score ctxt"><input maxlength="2" data-team="A3" pattern="[0-9]*" type="text">&#65293;<input maxlength="2" data-team="A4" pattern="[0-9]*" type="text"></td><td class="team ltxt"><div class="flag-24 flag-24-CM"></div>Cameroon</td></tr><tr><th rowspan="2">2</th><td class="d">2013-06-18</td><td class="t">02:00</td><td class="v">Fortaleza</td><td class="team rtxt"><div class="flag-24 flag-24-BR"></div>Brazil</td><td class="score ctxt"><input maxlength="2" data-team="A1" pattern="[0-9]*" type="text">&#65293;<input maxlength="2" data-team="A3" pattern="[0-9]*" type="text"></td><td class="team ltxt"><div class="flag-24 flag-24-MX"></div>Mexico</td></tr><tr><td class="d">2013-06-19</td><td class="t">05:00</td><td class="v">Manaus</td><td class="team rtxt"><div class="flag-24 flag-24-CM"></div>Cameroon</td><td class="score ctxt"><input maxlength="2" data-team="A4" pattern="[0-9]*" type="text">&#65293;<input maxlength="2" data-team="A2" pattern="[0-9]*" type="text"></td><td class="team ltxt"><div class="flag-24 flag-24-HR"></div>Croatia</td></tr><tr><th rowspan="2">3</th><td class="d">2013-06-24</td><td class="t">03:00</td><td class="v">Brasilia</td><td class="team rtxt"><div class="flag-24 flag-24-CM"></div>Cameroon</td><td class="score ctxt"><input maxlength="2" data-team="A4" pattern="[0-9]*" type="text">&#65293;<input maxlength="2" data-team="A1" pattern="[0-9]*" type="text"></td><td class="team ltxt"><div class="flag-24 flag-24-BR"></div>Brazil</td></tr><tr><td class="d">2013-06-24</td><td class="t">03:00</td><td class="v">Recife</td><td class="team rtxt"><div class="flag-24 flag-24-HR"></div>Croatia</td><td class="score ctxt"><input maxlength="2" data-team="A2" pattern="[0-9]*" type="text">&#65293;<input maxlength="2" data-team="A3" pattern="[0-9]*" type="text"></td><td class="team ltxt"><div class="flag-24 flag-24-MX"></div>Mexico</td></tr></tbody></table> -->
				<div style="width:100%;height:32px;">
					<p style="float:left;margin:4px;text-align:left;"></p>
					<div id="t1ope" style="width:100%;margin-top:8px;">
						<div>
							<a class="btn" href="javascript:randSet()" title="Set a RANDOM SCORE in the blank field">Fill With Random Score</a>
							<a class="btn" href="javascript:clear()" title="Clear all fields">Clear</a>
							<a class="btn" href="javascript:loadNextGroup()" title="Clear all fields">Done! Next Group</a>
						</div>
					</div>
				</div>
			</div>
			<div id="righ_panel">
				<div id="graph_ctn">
					<table id="t3" style="border:none;">
						<tbody>
							<tr>
								<td id="a1" class="rtxt">1A</td>
								<td id="graph" rowspan="8"></td>
								<td id="b1" class="ltxt">1B</td>
							</tr>
							<tr>
								<td style="display: table-cell;" id="b2" class="rtxt">2B</td>
								<td style="display: table-cell;" id="a2" class="ltxt">2A</td>
							</tr>
							<tr>
								<td style="display: table-cell;" id="c1" class="rtxt">1C</td>
								<td id="d1" class="ltxt">1D</td>
							</tr>
							<tr>
								<td id="d2" class="rtxt">2D</td>
								<td style="display: table-cell;" id="c2" class="ltxt">2C</td>
							</tr>
							<tr>
								<td id="e1" class="rtxt">1E</td>
								<td id="f1" class="ltxt">1F</td>
							</tr>
							<tr>
								<td id="f2" class="rtxt">2F</td>
								<td id="e2" class="ltxt">2E</td>
							</tr>
							<tr>
								<td id="g1" class="rtxt">1G</td>
								<td id="h1" class="ltxt">1H</td>
							</tr>
							<tr>
								<td id="h2" class="rtxt">2H</td>
								<td id="g2" class="ltxt">2G</td>
							</tr>
						</tbody>
					</table>
					<div style="clear:both;text-align:center;">
						<a target="_self" id="Knockoutstage" href="#" class="btn btn-large" style="margin: 0px auto 20px; opacity: 0.3; cursor: default;">Simulate Knockout stage</a>
					</div>
				</div>
				<div id="score_grid">
					<table id="t2">
						<thead>
							<tr>
								<td></td><th class="ctxt" title="Points">Pts</th><th class="ctxt" title="Played">MP</th><th class="ctxt" title="Won">W</th><th class="ctxt" title="Draw">D</th><th class="ctxt" title="Lost">L</th><th class="ctxt" title="Goals for">GF</th><th class="ctxt" title="Goals Against">GA</th><th class="ctxt" title="Goal Difference">GD</th>
							</tr>
						</thead>
						<tbody><tr class="A1"><th><div class="flag-24 flag-24-BR"></div>Brazil</th><td class="btxt">0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr class="A2"><th><div class="flag-24 flag-24-HR"></div>Croatia</th><td class="btxt">0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr class="A3"><th><div class="flag-24 flag-24-MX"></div>Mexico</th><td class="btxt">0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr class="A4"><th><div class="flag-24 flag-24-CM"></div>Cameroon</th><td class="btxt">0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr></tbody>
					</table>
				</div>
			</div>				
		</div>
	</div>
</body>
</html>